<template>
  <div class="min-wrap">
    <div class="body-wrap">
      <div class="head">
        <span :class="{ active: loginType === 'phone' }" @click="loginType = 'phone'">验证码登录</span>
        <span :class="{ active: loginType === 'pwd' }" @click="loginType = 'pwd'">密码登录</span>
      </div>
      <div>
        <div>
          <form-list
            ref="formRef"
            :label="formListLayout"
          />

          <el-form>
            <el-form-item v-if="loginType === 'pwd'">
              <div class="link-btn-wrap">
                <span>还没账号？<em class="link-btn" @click="changeDialogType('register')">立即注册</em></span>
                <a class="link-btn" @click="changeDialogType('forgetPwd')"><span>忘记密码？</span></a>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button size="large" class="login-btn" :loading="loading" type="primary" @click="handleLogin">登录{{ loginType ===
                "phone" ? " / 注册" : "" }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, computed } from "vue";
import { login } from "@/api/login";
import { debounce, getPwdMD5Str, getTypeOf } from "@/utils";
import { storeToRefs } from "pinia";
import { systemAppStore } from "@/stores/system";
import { userAppStore } from "@/stores/user";
import formList, { type Props as FormListProps } from "@/components/phone-form/form.vue";
import useMixins from "./mixins";
import PsMessage from "@/components/message/index";
import type { FormInstance } from 'element-plus'
const _systemAppStore_ = systemAppStore();
const _userAppStore_ = userAppStore()
const { appInfo, appCfg } = storeToRefs(_systemAppStore_);
const { onLoginFinish } = useMixins();
const formRef = ref<FormInstance|null>(null);
const loginType = ref("phone"); // pwd: 手机密码登录 phone: 手机验证码登录 wx: 微信登录 qq: QQ登录
const loading = ref(false);

const formListLayout = computed<FormListProps["label"]>(() => {
  return ["phone", loginType.value === "phone" ? "code" : "pwd", "protocol"];
});

watch(loginType, () => {
  formRef.value?.clearValidate();
  PsMessage.closeAll()
});
onMounted(() => {
  const query: any = _userAppStore_.ACDialogQuery;
  if (query.loginType === "pwd") {
    loginType.value = "pwd";
  }
});
/**
 * 登录
 */
function handleLogin() {
  formRef.value?.validate().then((data: any) => {
    if(!data) return
    const params = {
      type: loginType.value,
      phoneNumber: data.phone,
      codeID: "",
      code: "",
      pwd: "",
      authCode: data.phone,
      grantType: "authorization_code", // 授权类型 client_credentials: 客户端凭证 authorization_code:授权码
      channel: appInfo.value.channel, // 渠道信息
      uuid: appInfo.value.uuid, // 设备信息
      device_name: appInfo.value.device_name, // 设备名称
      version: appInfo.value.version // 版本号
    };
    if (loginType.value === "phone") {
      params.codeID = data.phone;
      params.code =  data.code;
    } else {
      params.pwd = getPwdMD5Str(data.pwd);
    }
    loading.value = true;
    login(params)
      .then((res) => {
        const data = res.data || {};
        data.isAutoLogin = true;
        data.loginType = "phoneLogin";
        onLoginFinish(data);
      })
      .finally(() => {
        loading.value = false;
      });
  });
}

/**
 * 切换弹框页面
 * @param {String} type 详见 src/views/login/index.vue comType
 */
function changeDialogType(type: string) {
  PsMessage.closeAll();
  _userAppStore_.setACDialogType(type);
}
</script>

<style lang="scss" scoped>
.body-wrap {
  margin: 50px 40px 0;
}

.head {
  margin-bottom: 30px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  gap: 58px;

  span {
    cursor: pointer;
  }

  .active {
    font-weight: bold;
    color: $color-primary;
    border-bottom: 2px solid $color-primary;
    padding-bottom: 3px;
  }
}

.link-btn-wrap {
  width: 100%;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--el-text-color-regular);
  .link-btn{
    --text-color: var(--el-text-color-primary);
  }
}

.login-btn {
  width: 100%;
}
</style>
